<template>
	<view class="content">
		<view class="text">
			<view class="t1">
				<view style="color: #00aa8e; font-size: 32rpx; font-weight: 600;">-67.90亿</view>
				<view style="color: #33333; font-size: 24rpx;">最近（03.03）</view>
			</view>
			<view class="t1">
				<view style="color: #ff4658; font-size: 32rpx; font-weight: 600;">330.94亿</view>
				<view style="color: #33333; font-size: 24rpx;">近20天</view>
			</view>
			<view class="t1">
				<view style="color: #ff4658; font-size: 32rpx; font-weight: 600;">1428.32亿</view>
				<view style="color: #33333; font-size: 24rpx;">近60天</view>
			</view>
		</view>
		<view class="title"></view>
		<view class="charts-box">
			<qiun-data-charts type="mix" :chartData="column1" :loadingType="5" background="none" :animation="false" />
		</view>
		<view class="yuandian">
			<view class="yandian1">
				<image src="../../static/iamges/thongx.png" mode=""></image>
				<image src="../../static/iamges/tlv.png" mode=""></image>
				<text style="color: #777777; font-size: 24rpx; margin-left: 10rpx;">资金流向亿元</text>
			</view>
			<view class="yandian1 " style="text-align: center; line-height: 60rpx;">
				<image src="../../static/iamges/thuang.png" mode=""></image>
				<text style="color: #777777; font-size: 24rpx; margin-left: 10rpx;">中证指数</text>

			</view>

		</view>
		<view class="fenlei">

			<view :class="item.code==true?'xuanzhong':''" style="border-left:0px ;" v-for="(item,index) in codetext"
			:key="index"	@click="change(index)">{{item.t}}</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "tubiao",
		created(){
			this.qumian()
		},
		data() {
			return {
				column1: {
					"categories": [
						"2016",
						"2017",
						"2018",
						"2019",
						"2020",
						"2021"
					],
					"series": [{
							"name": "曲面",
							"data": [
								70,
								50,
								85,
								130,
								64,
								88
							],
							"type": "area",
							"style": "curve"
						},
						{
							"name": "柱1",
							"index": 1,
							"data": [
								40,
								30,
								55,
								110,
								24,
								58
							],
							"type": "column"
						},
						{
							"name": "柱2",
							"index": 1,
							"data": [
								50,
								20,
								75,
								60,
								34,
								38
							],
							"type": "column"
						},
						{
							"name": "曲线",
							"data": [
								70,
								50,
								85,
								130,
								64,
								88
							],
							"type": "line",
							"style": "curve",
							"color": "#1890ff",
							"disableLegend": true
						},
						{
							"name": "折线",
							"data": [
								120,
								140,
								105,
								170,
								95,
								160
							],
							"type": "line",
							"color": "#2fc25b"
						},

					]
				},
				codetext: [{
						t: '泸深股通',
						code: true
					},
					{
						t: "泸股通",
						code: false
					},
					{
						t: "深股通",
						code: false
					},
					{
						t: "港股通",
						code: false
					}
				],
				arr:[],
			}
		},
		methods: {
			change(t) {

				this.codetext.map((item, index) => {
					item.code = false
					if (t == index) {
						item.code = !item.code
					}
					return item
				})
			},
			qumian(){
				
				for(let i = 0;i<= 6;i++){
				const data=	Math.random()*100
				this.arr.push(data.toFixed(3))
				}
				
			}
		},
		computed:{
			
		}
		
	}
</script>

<style lang="scss" scoped>
	.yuandian {
		margin-top: 20rpx;
		display: flex;

		.yandian1 {
			width: 50%;

			height: 60rpx;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 20rpx;
				margin-top: 20rpx;
			}
		}
	}

	.text {
		margin-top: 30rpx;
		height: 100rpx;
		text-align: center;
		display: flex;
		margin-bottom: 20rpx;
		text-align: center;

		.t1 {
			width: 33.33%;
			height: 100rpx;

			padding-top: 10rpx;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
		margin-top: 20rpx;
	}

	.charts-box {
		width: 100%;
		height: 300px;

	}

	.fenlei {

		height: 60rpx;
		width: 100%;
		margin: 20rpx auto;
		border: 1px solid #cdcdcd;
		border-radius: 20rpx;
		display: flex;

		view {
			width: 25%;
			text-align: center;
			line-height: 60rpx;
			border-right: 1px solid #cdcdcd;
		}
	}

	.xuanzhong {
		background-color: #ff4658;
		color: #FFFFFF;
		border-radius: 20rpx;
	}
</style>
